<template>
    <div style="margin-bottom: 1.5rem">
        <div class="header">任务列表</div>
        <ul class="Status_ul">
            <li class="clearfix" v-for="sta in status" v-on:click="submit(sta.status,sta.name)">
                <img :src="sta.logo" alt="" class="statusLogo"/>
                <img src="../../images/right.png" alt="" class="StatusLink"/>
                <h3><span>{{ sta.name }}</span>{{ sta.total_status_num }}单</h3>
                <p v-if="time && sta.status == 5" class="no-time">请尽快修改提交 {{ time }} 后自动放弃</p>
                <p class="StatusTxt" v-else>{{ sta.description }}</p>
                <div class="StatusNumbers" v-if="sta.status == 1 || sta.status == 2 || sta.status == 6">
                    <p v-if="sta.status == 2">累积收益</p>
                    <p v-else>预计收益</p>
                    <span>{{ sta.total_status_money }}</span>
                </div>
            </li>
        </ul>
        <!-- 底部切换 -->
        <barTab/>
    </div>
</template>

<script>
    import api from '../../utils/api';
    import barTab from '@/components/components/barTabBottom';

    export default {
        name: 'MyTasks',
        components: {
            barTab
        },
        data() {
            return {
                status: [],
                date: false,
                endTime: false,
                time: false,
                domin: localStorage.getItem('domin')
            }
        },
        methods: {
            async setData() {
                let resp = await api.request('/myWorks', 'get', {})
                for (let i in resp.data.data) {
                    resp.data.data[i].logo = '../static/images/status' + (resp.data.data[i].status) + '.png'
                    if(resp.data.data[i].status == 5 && resp.data.data[i].last_expire_time){
                        this.endTime = new Date(parseInt(resp.data.data[i].last_expire_time) * 1000).toLocaleString('chinese', {hour12: false})
                        let time = setInterval(() => {
                            if (this.flag === true) {
                                clearInterval(time)
                                this.flagShow = false
                            } else {
                                this.flagShow = true
                            }
                            this.timeDown()
                        }, 1000)
                    }
                }
                this.status = resp.data.data;
            },
            async submit(status = 0, name = '全部任务') {
                this.$router.push({
                    path: `/task/my_task_list/${status}`,
                    query: {
                        status: status,
                        name: name
                    }
                })
                // window.AndroidWebView.PictureCallback(`${this.domin}task/my_task_list/${status}`,name);
            },
            timeDown() {
                const endTime = new Date(this.endTime)
                const nowTime = new Date();
                let time = '';
                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 0) {
                    this.flag = true;
                    return false;
                }
                let ds = ''
                let hs = ''
                let ms = ''
                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                this.time = time + s + '秒';
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
        },
        created() {
            localStorage.setItem('bartabInx', 2)
            this.setData()

        }

    }

</script>

<style scoped>
    .no-time{
        background: #FFEB6E;
        display: inline-block;
        padding: 0 .2rem;
        -webkit-border-radius: .2rem;
        -moz-border-radius: .2rem;
        border-radius: .2rem;
        font-weight: 600;
        font-size: 0.35rem
    }
</style>
